jQuery Mobile ボタンのアイコン

はじめに

jQuery Mobileではフレームワークとしてボタンのアイコンが15個のアイコンが用意されています。殆どこれでだけ足りるのではないでしょうか。今回はアイコンの使い方について紹介します。

使ってみる

アイコンはdata-icon="{アイコンの名前}"で指定します。簡単ですね。

<a href="#" data-role="button" data-icon="arrow-l">arrow-l</a>

この例では、左向き矢印のアイコンを表示できます。また、data-iconpos="{left,right,top,buttom,notext}"でアイコンの表示位置を指定できます。notextの場合はアイコン画像だけが表示されます。

<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">arrow-l</a>

サンプル

アイコン15個(ボタンのラベルにアイコン名を入れました)と表示位置5個のサンプルを作りました。ページ毎にテーマを変えています。各テーマの雰囲気と共に参考にしてみてください。

サンプルを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）